<template>
  <div class="home">
    <el-row :gutter="20" style="padding:20px">
      <el-col :span="6"><div class="grid-content" @click="go('AnyPhoto')"><span class="bg1">随手拍</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('News')"><span class="bg2">美丽阳江</span></div></el-col>
      <el-col :span="6"><div class="grid-content"><span class="bg3">漠阳味道</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('Market')"><span class="bg4">产品行情</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('Knowledge')"><span class="bg5">农科讲堂知识管理</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('Service')"><span class="bg6">惠农服务</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('Policy')"><span class="bg7">补贴政策</span></div></el-col>
      <el-col :span="6"><div class="grid-content" @click="go('CreditHelp')"><span class="bg8">信贷政策</span></div></el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  methods: {
    go(route) {
      this.$router.push(route)
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;

  .grid-content{
    background: #F5F8FB;
    height: 175px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 8px;

    span.bg1{
      background: url("../../assets/images/icon1.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg2{
      background: url("../../assets/images/icon2.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg3{
      background: url("../../assets/images/icon3.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg4{
      background: url("../../assets/images/icon4.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg5{
      background: url("../../assets/images/icon5.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg6{
      background: url("../../assets/images/icon6.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg7{
      background: url("../../assets/images/icon7.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }

    span.bg8{
      background: url("../../assets/images/icon8.png") no-repeat center top;
      background-size: 48px 48px;
      padding-top: 58px;
    }
  }
}
</style>
